import Editor from 'for-editor'
import { useState } from 'react'
import styles from "./index.less"
import { Button, Popconfirm } from 'antd';
import { IRouteComponentProps } from 'umi';
const Editors: React.FC<IRouteComponentProps<{ id: string }>> = (props) => {
    const [value, setValue] = useState("")

    return <div>
        <header className={styles.editor_id_header}>
            <div className={styles.editor_id_ghost}>
                <div className={styles.editor_id_content}>
                    <div>
                        <Popconfirm title="确认关闭？如果有内容变更，请先保存" onConfirm={() => {props.history.push("/page") }} okText="确认" cancelText="取消">
                            <Button htmlType="submit" className={styles.editor_button_close}>
                                <span>
                                    <svg viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg>
                                </span>
                            </Button>
                        </Popconfirm>
                        <span className={styles.editor_input_title}>
                            <input type="text" placeholder='请输入页面名称' value={value} onChange={() => { }} />
                        </span>
                    </div>
                    <span>
                        <Button htmlType="submit" type="primary">
                            <span>发布</span>
                        </Button>
                        <Button htmlType="submit" type="text">
                            <span>
                                <svg viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg>
                            </span>
                        </Button>
                    </span>
                </div>
            </div>
        </header>
        <main>
            <Editor value={value} onChange={(value) => setValue(value)} />
        </main>
    </div>
}
export default Editors